<!DOCTYPE html>
<html>
<head>
	<title>游戏王Horus</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="jquery.Jcrop.min.css">
</head>
<body>
<div id="box">
	<div class="topbar">
		<div>制卡器</div>
		<div onclick="alert('敬请期待')">卡片展示</div>
		<div onclick="alert('敬请期待')">卡组交流</div>
		<div onclick="alert('敬请期待')">卡片查询</div>
		<div onclick="window.open('http://p.qiao.baidu.com/cps/chat?siteId=12890956&userId=26931838&cp=http%3A%2F%2Fymssx.gitee.io%2Fcar%2Fpc.html&cr=&cw=')">反馈</div>
	</div>
	<div class="menu">
		<div class="menu2">
			<select v-model="lang" class="w_1">
				<option>中文</option>
				<option>日文</option>
			</select>
			<select v-model="rarity" class="w_1">				
				<option>N</option>
				<option>R</option>
				<option>SR</option>
				<option>UR</option>
			</select>
			<div class="w_2 bg_light">此罕贵效果仅作展示，不代表实际效果</div>
		</div>
		<input v-model="ifm_cn.name" v-show="this,lang=='中文'">
		<input v-model="ifm_jp.name" v-show="this,lang=='日文'">
		<div :class="this.ifm.type=='monster'?'menu2 num4':'menu2 num2'">
			<select v-model="ifm.type" v-on:change="type_change()">
				<option v-for="type in types" v-bind:value="type.value">{{type.text}}</option>
			</select>
			<select v-model="ifm.type2" v-show="this.ifm.type=='monster'">
				<option v-for="type2 in types2" v-bind:value="type2.value">{{type2.text}}</option>
			</select>
			<select v-model="ifm.type3" v-show="this.ifm.type=='monster'">
				<option value="">无</option>
				<option value="lb" v-show="ifm.type2!='lj'">灵摆</option>
				<option v-for="type21 in types21" v-bind:value="type21.value">{{type21.text}}</option>
			</select>
			<select v-model="ifm.type4" v-show="this.ifm.type=='monster'">
				<option value="">无</option>
				<option v-for="type21 in types21" v-bind:value="type21.value">{{type21.text}}</option>
			</select>
			<select v-model="ifm.type2" v-show="this.ifm.type=='magic'">
				<option v-for="type3 in types3" v-bind:value="type3.value">{{type3.text}}</option>
			</select>
			<select v-model="ifm.type2" v-show="this.ifm.type=='tragic'">
				<option v-for="type4 in types4" v-bind:value="type4.value">{{type4.text}}</option>
			</select>
		</div>
		<div class="lb_box" v-show="this.ifm.type3=='lb'">
			<input class="lb f_blue" v-model="ifm.lb" placeholder="<" value="">
			<textarea class="lb_txt" v-model="ifm_cn.lb_value" placeholder="请输入灵摆效果" v-show="this,lang=='中文'"></textarea>
			<textarea class="lb_txt" v-model="ifm_jp.lb_value" placeholder="请输入灵摆效果" v-show="this,lang=='日文'"></textarea>
			<input class="lb f_red" v-model="ifm.lb" placeholder=">" value="">
		</div>
		<div class="menu2 num3" v-show="this.ifm.type=='monster'">
			<select v-model="ifm.race" v-show="!diy_race">
				<option value="999">-自定义-</option>
				<option v-for="(race,index) in race_cn" v-bind:value="index">{{race}}</option>
			</select>
			<input class="bg_dark" v-model="new_race" placeholder="请输入种族" v-show="diy_race" v-on:blur="add_race">
			<input type="number" v-model="ifm.stars" max="12" min="1" v-show="this.ifm.type2!='lj'">
			<select v-model="ifm.property">
				<option v-for="prop in props" v-bind:value="prop.value">{{prop.text}}</option>
			</select>
			<input type="number" v-model="new_attack" step="100" min="0" v-show="this.ifm.type2=='lj'">
		</div>
		<div class="link" v-show="this.ifm.type2=='lj'">
			<div class="menu2 link3">
				<div v-on:click="link(0)" :class="!ifm.links[0]?'bg_dark':'bg_orange'">↖</div>
				<div v-on:click="link(1)" :class="!ifm.links[1]?'bg_dark':'bg_orange'">↑</div>
				<div v-on:click="link(2)" :class="!ifm.links[2]?'bg_dark':'bg_orange'">↗</div>
			</div>
			<div class="menu2 link2">
				<div v-on:click="link(3)" :class="!ifm.links[3]?'bg_dark':'bg_orange'">←</div>
				<div v-on:click="link(4)" :class="!ifm.links[4]?'bg_dark':'bg_orange'">→</div>
			</div>
			<div class="menu2 link3">
				<div v-on:click="link(5)" :class="!ifm.links[5]?'bg_dark':'bg_orange'">↙</div>
				<div v-on:click="link(6)" :class="!ifm.links[6]?'bg_dark':'bg_orange'">↓</div>
				<div v-on:click="link(7)" :class="!ifm.links[7]?'bg_dark':'bg_orange'">↘</div>
			</div>
		</div>
		<div onclick="cl()" class="up">上传卡图</div>
		<div class="cut_box" v-show="cut_t">
			<img src="img/pic.jpg" id="pic" class="cut">
			<div class="cut_box2">
				<div :class="ls?'bg_blue':'bg_dark'" v-on:click="cut_op(1)">拉伸</div>
				<div :class="!ls?'bg_blue':'bg_dark'" v-on:click="cut_op(2)">裁剪</div>
				<div class="bg_dark" onclick="card.cut_t=false">收起</div>
			</div>
		</div>
		<div class="menu2 num2" v-show="this.ifm.type=='monster' && this.ifm.type2!='lj'">
			<input type="text" v-model="new_attack" step="100" min="0">
			<input type="text" v-model="new_defend" step="100" min="0">
		</div>
		<div class="menu2 num4">
			<input id="holo_box" type="checkbox" v-model="holo" value="true">
			<label for="holo_box" :class="holo?'bg_blue':'bg_dark'">防伪标志</label>
			<input id="right_box" type="checkbox" v-model="copyright" value="true">
			<label for="right_box" :class="copyright?'bg_blue':'bg_dark'">版权</label>
			<input id="key" type="checkbox" v-model="key" value="true">
			<label for="key" :class="key?'bg_blue':'bg_dark'">卡片密码</label>
			<input id="card_bag" type="checkbox" v-model="card_bag" value="false">
			<label for="card_bag" :class="card_bag?'bg_blue':'bg_dark'">卡包</label>
		</div>
		<div :class="card_bag && key?'menu2 num2':'menu2 num1'" v-show="card_bag || key">
			<input type="text" v-model="password" v-show="key" placeholder="请输入卡片密码">
			<input type="text" v-model="card_bag_num" v-show="card_bag" placeholder="请输入卡包号">
		</div>
		<textarea v-model="ifm_cn.value" v-show="this.lang=='中文'"></textarea>
		<textarea v-model="ifm_jp.value" v-show="this.lang=='日文'"></textarea>
		<div class="menu2 num2">
			<a href="img/cover2.jpg" download="cover"><div class="bg_brown" style="cursor: pointer;border-radius: 5px">下载卡背</div></a>
			<div class="bg_green" onclick="dl()" style="cursor: pointer;">下载卡图</div>
		</div>

		<input style="opacity:0" type="range" v-model="r" min="0" max="360" value="0">
	</div>
	<input id="upimg" type="file" multiple accept="image/*" onchange="upload(this)"> 
	<div class="card">
		<div class="source">
			<img :src="card_type" id="bg">
			<img src="img/holo.png" id="holo">
			<img src="img/star.png" id="star">
			<img src="img/darkstar.png" id="darkstar">
			<img src="img/level.png" id="level">
			<img :src="property_src" id="prop">
			<img :src="type2_src" id="type2">
			<img src="img/cover.jpg" id="cover">
			<img src="" id="front">
			<img src="img/arrow.png" id="arrow">
			<img src="img/arrow1.png" id="arrow1">
			<img src="img/arrow2.png" id="arrow2">
			<img src="img/arrow12.png" id="arrow12">
			<img src="img/flash.jpg" id="flash">
			<img src="img/holo.jpg" id="holo2">
			<img src="img/lmonster.png" id="lb">
			<p style="font-family: jp">杨明</p>
			<p style="font-family: txt">杨明</p>
			<p style="font-family: number">YangMing</p>
		</div>
		<canvas width="694" height="1013" id="card" onmousemove="rotate(event)" onmouseout="out()"></canvas>
	</div>
	<script src="vue.min.js"></script>
	<script src="jquery.min.js"></script>
	<script src="jquery.Jcrop.min.js"></script>
	<script src="canvas2image.js"></script>
	<script src="main.js"></script>
	<div class="source">
		<img src="img/property/light.png">
		<img src="img/property/dark.png">
		<img src="img/property/wind.png">
		<img src="img/property/ground.png">
		<img src="img/property/water.png">
		<img src="img/property/fire.png">
		<img src="img/property/god.png">
		<img src="img/property/magic.png">
		<img src="img/property/tragic.png">
		<img src="img/magic.jpg">
		<img src="img/tragic.jpg">
		<img src="img/type/cd.png">
		<img src="img/type/fj.png">
		<img src="img/type/sg.png">
		<img src="img/type/ys.png">
		<img src="img/type/yx.png">
		<img src="img/type/zb.png">
		<img src="img/nmonster.jpg">
		<img src="img/rmonster.jpg">
		<img src="img/emonster.jpg">
		<img src="img/ymonster.jpg">
		<img src="img/tmonster.jpg">
		<img src="img/dtmonster.jpg">
		<img src="img/cmonster.jpg">
		<img src="img/link.jpg">
	</div>
</div>
</body>
</html>